<template>
	<view>
		<view class="bg">
		</view>
		<view class="wrapper">
			<view class="middle">
				<u-form :model="packageData" label-width="200" :border-bottom="false"
				ref="uForm">
				<view class="middle_wrapper">
					<u-form-item label="收件人" class="label" :border-bottom="false"
					prop="name"
					required="true">
						<u-input v-model="packageData.name" 
						input-align="right"
						placeholder="请输入收件人名字"
						/>
					</u-form-item>
				</view>
				<view class="middle_wrapper">
					<u-form-item label="联系电话" class="label" :border-bottom="false"
					prop="tel"
					required="true">
						<u-input v-model="packageData.tel" 
						input-align="right"
						placeholder="请输入收件人联系电话"
						type="number"
						/>
					</u-form-item>
				</view>
				<view class="middle_wrapper">
					<u-form-item label="国家/地区" class="label" :border-bottom="false"
					prop="country"
					required="true">
						<u-input v-model="packageData.country" 
						input-align="right"
						placeholder="请输入国家/地区"
						/>
					</u-form-item>
				</view>
				<view class="middle_wrapper">
					<u-form-item label="城市" class="label" :border-bottom="false"
					prop="city"
					required="true">
						<u-input v-model="packageData.city" 
						input-align="right"
						placeholder="请输入城市"
						/>
					</u-form-item>
				</view>
				<view class="middle_wrapper">
					<u-form-item label="街道" class="label" :border-bottom="false"
					prop="street"
					required="true">
						<u-input v-model="packageData.street" 
						input-align="right"
						placeholder="请输入街道"
						/>
					</u-form-item>
				</view>
				<view class="middle_wrapper">
					<u-form-item label="门牌号" class="label" :border-bottom="false"
					prop="room"
					required="true">
						<u-input v-model="packageData.room" 
						input-align="right"
						placeholder="请输入门牌号"
						/>
					</u-form-item>
				</view>
				<view class="middle_wrapper">
					<u-form-item label="邮编" class="label" :border-bottom="false"
					prop="zipcode"
					required="true">
						<u-input v-model="packageData.zipcode" 
						input-align="right"
						placeholder="请输入邮编"
						type="number"
						/>
					</u-form-item>
				</view>
				</u-form>
			</view>
		</view>
		<view class="btn" @click="toCun">
			<button>保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			packageData:{
				name:"",
				tel:"",
				country:"",
				city:"",
				street:"",
				room:"",
				zipcode:""
			},
			rules: {
				name: [
					{ 
						required: true, 
						message: '该选项必填', 
						// 可以单个或者同时写两个触发验证方式 
					}
				],
				tel: [
					{
						required: true, 
						message: '该选项必填', 
					},			
				],
				country: [
					{
						required: true, 
						message: '该选项必填', 
					}
				],
				city: [
					{
						required: true, 
						message: '该选项必填', 
					}
				],
				street: [
					{
						required: true, 
						message: '该选项必填', 
					}
				],
				room: [
					{
						required: true, 
						message: '该选项必填', 
					}
				],
				zipcode: [
					{
						required: true, 
						message: '该选项必填', 
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	async onShow() {
		let {data}=await this.getAddress()
		for(let item in this.packageData){
			this.packageData[item]=data[item]
		}
		console.log(data)
	},
	methods: {
		async getAddress(){
			let token=uni.getStorageSync("token")
			const {data}=await this.$http({
				url:"member/address",
				header:{
					token
				},
			})
			return data
		},
		async updateAddress(packageData){
			let {name,tel,country,city,street,room,zipcode}=packageData
			let token=uni.getStorageSync("token")
			const {data}=await this.$http({
				url:"member/address",
				data:{
					name,
					tel,
					country,
					city,
					street,
					room,
					zipcode
				},
				methods:"post",
				header:{
					token
				},
			})
			return data
		},
		toCun(){
			this.$refs.uForm.validate(async valid => {
				if (valid) {
					let {code}=await this.updateAddress(this.packageData)
					if(code!==1){
						uni.showToast({
							title:"保存失败",
							icon:"error"
						})
						return
					}
					uni.switchTab({
						url:"/pages/mime/mime"
					})
					uni.showToast({
						title:"保存成功",
					})
				}else{
					uni.showToast({
						title:"请根据提示填写",
						icon:"error"
					})
				}
			})			
		}
	}
};
</script>

<style scoped>
.bg{
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}
.wrapper{
	padding: 30rpx;
}
.middle{
	background-color: #FFFFFF;
	border-radius: 10rpx;
}
.middle_wrapper{
	padding: 0 40rpx;
	border-bottom: 1px solid rgba(151,151,151,0.2);
}
.btn button{
	width: 690rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
</style>
